<template>
    <div class="page_invite_regist" >
       <div class="top_log">
          <img :src="imglist[0].src"/>
       </div>
       <div class="form">
           <div class="form_item">
               <label><img :src="imglist[1].src" class="first"/></label>
               <input type="text" placeholder="请输入您的手机号" name="phone" v-model="form.phone" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }"/>
                <div class="error">
                    <span v-show="errors.has('phone')" class="text-style" v-cloak> {{ errors.first('phone')}} </span>
                </div>
           </div>
           <div class="form_item">
               <label class="label2"><img :src="imglist[2].src"/></label>
               <input type="text" placeholder="请输入验证码"  v-model="form.code" name="code" v-validate="'required|code'" :class="{'input': true, 'is-danger': errors.has('code') }"/>
               <div class="sendcode" @click="sendcode()">{{msg}}</div>
                 <div class="error">
                    <span v-show="errors.has('code')" class="text-style" v-cloak> {{ errors.first('code')}} </span>
                </div>
           </div>
           <div class="form_item" v-if="haspassword">
               <label class="label2"><img :src="imglist[2].src"/></label>
               <input type="text" placeholder="请设置登录密码" v-model="form.password"/>
           </div>

           <div class="build" @click="sbumit">绑定账号</div>
       </div>
      </div>

</template>

<script>
import { Toast } from "mint-ui";
import "@/public/libs/VeeValidate";
export default {
  props: [],
  data() {
    return {
      openId: "",
      oncetoken: "",
      haspassword: false,
      msg: "发送验证码",
      defaultsecond: 60,
      imglist: [
        { src: require("@/public/imgs/invite_regist/invite_log.png") },
        { src: require("@/public/imgs/invite_regist/invite_phone.png") },
        { src: require("@/public/imgs/invite_regist/invite_password.png") }
      ],
      form: {
        phone: "",
        code: "",
        password: ""
      }
    };
  },
  methods: {
    countdown(){
    if (this.defaultsecond == 60) {
          var _this = this;
          setInterval(function() {
            _this.defaultsecond--;
            _this.msg = `请等待${_this.defaultsecond}s`;
            if (_this.defaultsecond == 0) {
              _this.defaultsecond = 60;
              _this.msg = "发送验证码";
            }
          }, 1000);
        }
    },
    sbumit() {
      this.$validator.validateAll().then(res => {
        if (res && this.haspassword == false) {
          //老用户绑定
          this.$http
            .post(this.Interface.checkWeixinNopassword, {
              mobile: this.form.phone,
              openId: this.openId,
              checkCode: this.form.code
            })
            .then(res => {
              if (res.data.success && !res.data.data.error_code) {
                Toast({
                  message: "绑定成功",
                  position: "top",
                  duration: 2000
                });
                 sessionStorage.setItem("jump", "true");
                 window.location.href=`${this.Interface.getWeixinHost}invite`
              } else {
                Toast({
                  message: res.data.data.error_msg,
                  position: "top",
                  duration: 2000
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else if (
          res &&
          this.haspassword == true &&
          this.form.password !== ""
        ) {
          //新用户注册绑定
          this.$http
            .post(this.Interface.checkWeixinHaspassword, {
              openId: this.openId,
              password: this.form.password,
              checkCode: this.form.code,
              mobile: this.form.phone
            })
            .then(res => {
              if (res.data.success && !res.data.data.error_code) {
                Toast({
                  message: "注册成功",
                  position: "top",
                  duration: 2000
                });
                    sessionStorage.setItem("jump", "true");
                    window.location.href=`${this.Interface.getWeixinHost}invite`
                
              } else {
                Toast({
                  message: res.data.data.error_msg,
                  position: "top",
                  duration: 2000
                });
              }
            });
        }
      });
    },
    sendcode() {
      //获取oncetoken
      if(this.defaultsecond == 60){
      if (this.$validator.flags.phone.valid) {
        this.$http
          .get(this.Interface.getRegOnceToken)
          .then(res => {
            if (res.data.success) {
              this.oncetoken = res.data.data.onceToken;
              return this.$http.post(this.Interface.getWeixinCode, {
                onceToken: this.oncetoken,
                openId: this.openId,
                mobile: this.form.phone
              });
            } else {
              Toast({
                message: res.data.msg,
                position: "top",
                duration: 2000
              });
            }
          })
          .then(res => {
             if(res.data.success&&!res.data.data.error_code){
                this.countdown()
             }else{
                Toast({
                message: res.data.data.error_msg,
                position: "top",
                duration: 2000
              });
             }
            if (res.data.success && res.data.data.mobileStatus == false) {
              this.haspassword = true;
            }
          });
      
      }
      }

    }
  },

  created() {
   
    this.$nextTick(function() {
      try {
        let wxOpenId = document.getElementById("openid").innerText;
        if (wxOpenId !== "") {
          wxOpenId = JSON.parse(wxOpenId);
          this.openId = wxOpenId.openid;
        }
      } catch (e) {}
    });
  }
};
</script>
<style lang="less">
.page_invite_regist {
  button {
    -webkit-user-modify: read-plaintext-only;
    -moz-user-modify: read-plaintext-only;
    -ms-user-modify: read-plaintext-only;
    -o-user-modify: read-plaintext-only;
    user-modify: read-plaintext-only;
  }
  .top_log {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    margin-bottom: 110px;
    img {
      width: 168px;
      height: 174px;
    }
  }
  .form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .form_item {
      position: relative;
      margin-bottom: 50px;
      width: 650px;
      .sendcode {
        width: 200px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        text-align: center;
        background: #ffbd33;
        color: #fff;
        font-size: 24px;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        top: 10px;
      }
      label {
        position: absolute;
        top: 20px;
        left: 0px;
        img {
          width: 36px;
          height: 28px;
        }
        .first {
          width: 28px;
          height: 39px;
           left: 10px; 
        }
      }
      .label2{
          top: 27px;
      }
      input {
        width: 636px;
        height: 84px;
        color: #9a9a9a;
        font-size: 32px;
        border-bottom: 1px solid #e3e1e1;
        text-indent: 86px;
      }
    }
    .build {
      margin-top: 20px;
      text-align: center;
      color: #fff;
      font-size: 36px;
      line-height: 84px;
      width: 638px;
      height: 84px;
      border-radius: 4px/5px 5px 4px 4px;
      background-color: #5261f7;
    }
  }
}
</style>
